{% extends 'base.html' %}
{% block title %} 笔记 {% endblock %}
{% block head %}
    <link rel="stylesheet" href="{{ url_for('static',filename = 'css/detail.css') }}">
    <script type="text/javascript">
        //富文本的反转义
        $(document).ready(function () {
            $('.note-content').html($('.note-content').text())
        });
    </script>
{% endblock %}

{% block main %}
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="row clearfix">
                    <div class="col-md-1 column">

                    </div>

                    <div class="col-md-10 column">
                        <div class="note-main">
                            <h3 class="text-center">
                                {{ note.title }}
                            </h3>
                            <div class="note-content">
                                {{ note.content }}
                            </div>
                            <div class="note-foot">
                                {% for tag in note.tags %}
                                    <span class="note-tag label label-primary"> {{ tag.text }}</span>
                                {% endfor %}
                                <span class="create-time"> {{ note.create_time }}</span>
                            </div>
                        </div>
                        <div class="media-item message-main">
                            <p>追记：（{{ count }}）</p>
                            <form action="{{ url_for('message') }}" method="post">
                                <div class="form-group">
                                    <textarea name="messageContent" placeholder="请输入内容" rows="4"
                                              class="form-control"></textarea>
                                </div>
                                <input type="hidden" name="note_id" value="{{ note.id }}">
                                <button type="submit" class="btn btn-default btn-block btn-primary">发表评论</button>
                            </form>
                            <ul class="media-list">
                                {% if note.messages %}
                                    {% for message in note.messages %}
                                        <li class="media">
                                            <div class="media-body">
                                                <div>
                                                    <span class="username">{{ message.user.username }}</span>
                                                    <span > 于{{ message.create_time }}</span>
                                                </div>
                                                <p class="content">
                                                    {{ message.content }}
                                                </p>
                                            </div>
                                        </li>
                                    {% endfor %}
                                {% else %}
                                    暂无追记
                                {% endif %}
                            </ul>
                        </div>
                    </div>

                    <div class="col-md-1 column">

                    </div>

                </div>
            </div>
        </div>
    </div>

    <div class="foot">
    </div>

{% endblock %}